{% extends "../layout/main.html" %}
{% block css %}<!-- Morris Charts CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/morris.js/0.5.1/morris.css">{% end %}
{% block title %}福娃后台-已兑奖福娃{% end %}
{% block contents %}<div class="row">
    <div class="col-lg-12">
        <h3 class="page-header">已兑奖福娃</h3>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                已兑奖福娃列表
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="table-responsive">
                     <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-fuwa">
                    <thead>
                    <tr>
                        <th>号码</th>
                        <th>申请人</th>
                        <th>位置</th>
                        <th>操作</th>
                    </tr>
                </thead>
                </table>
                <!-- /.table-responsive -->
                </div>
            </div>
        </div>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->{% end %}
{% block js %}<script src="http://cdn.bootcss.com/raphael/2.2.7/raphael.min.js"></script>
<script src="http://cdn.bootcss.com/morris.js/0.5.1/morris.min.js"></script>
<script src="{{ static_url("SBadmin/vendor/datatables/js/jquery.dataTables.min.js") }}"></script>
<script src="{{ static_url("SBadmin/vendor/datatables-plugins/dataTables.bootstrap.min.js") }}"></script>
<script src="{{ static_url("SBadmin/vendor/datatables-responsive/dataTables.responsive.js") }}"></script>
<script>
    $(function () {
        var opts = {
            "ajax": '/fuwa/awarded/list',
            "columns": [
                {"data": "id"},
                {"data": "name" },
                {"data": "pos"},
                {"data": "key_id"}
            ],
            "serverSide": true,
            "processing": true,
            "bFilter": false, ///是否启用客户端过滤功能
            //"bPaginate": false, ///显示使用分液器
            "bLengthChange": true,  ///是否可以修改页面显示行数
            "aLengthMenu": [10, 20, 30, 50, 100], ///设置可选的显示行数
            "iDisplayLength": 30,  ///默认显示20行
            //"sAjaxSource": "/fuwa/list",
            "oLanguage": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                }
            },
            "bSort": false ///是否可排序
        };
        var func = {
            "createdRow": function(row, data, index){
                L3 = '<a class="btn btn-default" href="/fuwa/info/' + data['key_id'] + '" role="button" target="_blank">详情</a> ';
                //L3 += ' <a class="btn btn-default" ';
                //L3 += 'href="http://api.map.baidu.com/marker?location='+ data['lat'] +','+ data['lng'] +'&title=' + data['id'] + '号福娃位置&content='+ data['detail'] +'&output=html"';
                //L3 += 'href="http://uri.amap.com/marker?position=' + data['lng'] + ',' + data['lat'] + '"';
                //L3 += ' role="button" target="_blank">查看位置</a>';
                $('td', row).eq(3).html(L3);
            }
        };
        o = $.extend(opts, func);
        $('#dataTables-fuwa').DataTable(o);
    });
</script>{% end %}